<template>
  <div class="hot">
    <div class="hot-main">
      <div
        class="goods"
        v-for="(item, index) in data.detail"
        :key="index"
        @click="fn(item)"
      >
        <div><img :src="require('@/assets/img/' + item.img)" alt="" /></div>
        <div class="prop">
          <p class="tit">{{ item.title }}</p>
          <p class="m">{{ item.pro }}</p>
          <p class="price">￥{{ item.price }}</p>
        </div>
        <p class="cart" @click.stop="addToCart(item)">
          <i class="el-icon-shopping-cart-2"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import data from "../assets/json/data.json";
export default {
  data() {
    return {
      data,
    };
  },
  methods: {
    fn(i) {
      this.$router.push({
        name: "one",
        params: {
          img: i.img,
          title: i.title,
        },
      });
    },
    addToCart(goods) {
      console.log(goods);
      this.$message({
        message: "添加成功",
        type: "success",
        duration: 800,
      });
      //第一个参数是要传给谁，第二个参数是payload要传的数据
      // this.$store.commit("addCart", {
      //   img: goods.img,
      //   price: goods.price,
      //   pro: goods.pro,
      //   title: goods.title,
      //   count: 1,
      //   id: goods.id,
      // });
      this.$store.commit("addCart", goods);
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.hot {
  height: 100%;
}
.hot-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .goods {
    margin-top: 10px;
    background: #fff;
    display: flex;
    img {
      flex: 1;
      width: 108px;
    }
    div {
      flex: 1;
    }
    div:nth-child(2) {
      flex: 2;
      .tit {
        margin-top: 12px;
        color: #6b6a66;
      }
      .price {
        margin-top: 20px;
      }
      .m {
        font-size: 14px;
        color: #9f9c96;
      }
    }
  }
}
.cart {
  width: 65px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  background: #00c562;
  text-align: center;
  font-size: 18px;
  margin-top: 70px;
}
</style>
